<!-- components/GridItem.vue -->
<template>
	<view class="grid-item" @click="handleClick">
		<slot name="icon">
			<text class="icon">{{ emoji }}</text>
		</slot>
		<text class="label">{{ label }}</text>
		<slot></slot>
	</view>
</template>

<script setup>
	const props = defineProps({
		label: String,
		emoji: String,
		url: String
	})

	function handleClick() {
		if (props.url) {
			uni.navigateTo({
				url: props.url
			})
		}
	}
</script>
<style lang="scss">
	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}

	.icon {
		font-size: 50rpx;
		margin-bottom: 10rpx;
	}

	.label {
		font-size: 26rpx;
		color: #333;
	}
</style>